<template>
  <view class="wallet">
    <header-vue :back="true" :title="title" bgColor="transparent"></header-vue>
    <view class="background-gradient">
      <image
        :src="IMAGE_URL+'/static/master/qianbao.png'"
        style="width: 100%; height: 640rpx"
      />
    </view>
    <view class="wallet-content">
      <!-- 背景渐变 -->

      <!-- 余额卡片 -->
      <view class="balance-card">
        <view class="balance-title">我的余额(元)</view>
        <view class="balance-header">
          <view class="balance-amount">
            <text class="balance-amount-money">￥</text>
            {{ walletData.balance }}</view
          >
          <button class="withdraw-btn" @click="handleWithdraw">提现</button>
        </view>
      </view>

      <!-- 资产统计 -->
      <view class="assets-section">
        <view class="section-title">我的资产</view>
        <view class="assets-grid">
          <view class="asset-item">
            <text class="asset-label">待入账(元)</text>
            <text class="asset-value">{{ walletData.pending }}</text>
          </view>
          <view class="asset-item">
            <text class="asset-label">今日收益(元)</text>
            <text class="asset-value">{{ walletData.todayIncome }}</text>
          </view>
          <view class="asset-item">
            <text class="asset-label">总收益(元)</text>
            <text class="asset-value">{{ walletData.totalIncome }}</text>
          </view>
        </view>
      </view>

      <view class="records-box">
        <!-- 记录选项卡 -->
        <view class="tabs-section">
          <view class="tabs">
            <view
              class="tab-item"
              :class="{ active: activeTab === 'income' }"
              @click="switchTab('income')"
            >
              <text>收益记录</text>
            </view>
            <view
              class="tab-item"
              :class="{ active: activeTab === 'withdraw' }"
              @click="switchTab('withdraw')"
            >
              <text>提现记录</text>
            </view>
          </view>
        </view>

        <!-- 记录列表 -->
        <view class="records-section">
          <!-- 收益记录 -->
          <view v-if="activeTab === 'income'" class="income-records">
            <view
              v-for="(record, index) in incomeRecords"
              :key="index"
              class="record-item"
            >
              <view class="record-left">
                <text class="record-type">{{ record.type }}</text>
                <text class="record-time">{{ record.time }}</text>
              </view>
              <view class="record-right">
                <text class="record-amount">+{{ record.amount }}</text>
              </view>
            </view>
          </view>

          <!-- 提现记录 -->
          <view v-if="activeTab === 'withdraw'" class="withdraw-records">
            <view
              v-for="(record, index) in withdrawRecords"
              :key="index"
              class="record-item"
            >
              <view class="record-left">
                <text class="record-type">提现到银行卡</text>
                <text class="record-time">{{ record.time }}</text>
              </view>
              <view class="record-right">
                <text class="record-amount withdraw-amount"
                  >-{{ record.amount }}</text
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import appConfig from "@/config/app.js";
    //  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
      title: "我的钱包",
      activeTab: "income",
      walletData: {
        balance: "1450.90",
        pending: "365.23",
        todayIncome: "52.36",
        totalIncome: "250.00",
      },
      incomeRecords: [
        { type: "维修费", time: "2025-02-11 14:12", amount: "36.54" },
        { type: "上门费", time: "2025-02-11 14:12", amount: "85.60" },
        { type: "跑腿费", time: "2025-02-11 14:12", amount: "5.63" },
        { type: "维修费", time: "2025-02-11 14:12", amount: "356.25" },
      ],
      withdrawRecords: [
        { time: "2025-02-10 09:30", amount: "200.00" },
        { time: "2025-02-05 16:45", amount: "300.00" },
        { time: "2025-01-28 11:20", amount: "150.00" },
      ],
    };
  },
  components: {
    headerVue,
  },
  methods: {
    // 切换选项卡
    switchTab(tab) {
      this.activeTab = tab;
    },

    // 处理提现
    handleWithdraw() {
      // uni.showModal({
      //   title: "提现申请",
      //   content: "确定要提现到绑定的银行卡吗？",
      //   success: (res) => {
      //     if (res.confirm) {
      //       uni.showToast({
      //         title: "提现申请已提交",
      //         icon: "success",
      //         duration: 2000,
      //       });
      //     }
      //   },
      // });
      uni.navigateTo({
        url: "/views-master/my/withdraw",
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #f7f7f7;
  .background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 0;
  }
  .wallet-content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    padding: 0 32rpx 32rpx 32rpx;

    .balance-card {
      margin-top: 86rpx;
      padding: 0 40rpx 50rpx 10rpx;
    }

    .balance-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32rpx;
    }

    .balance-title {
      font-size: 28rpx;
      color: #333333;
      font-weight: 400;
      margin-bottom: 28rpx;
    }
    .records-box {
      background: #ffffff;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .withdraw-btn {
      color: #ffffff;
      border: none;
      width: 202rpx;
      font-size: 32rpx;
      height: 68rpx;
      background: #209fea;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      text-align: center;
      line-height: 68rpx;
      margin: 0;
      &::after {
        border: none;
      }

      &:active {
        background: #209fea;
      }
    }

    .balance-amount {
      font-size: 68rpx;
      color: #333333;
      font-weight: bold;
    }
    .balance-amount-money {
      font-size: 48rpx;
    }
    .assets-section {
      background: #ffffff;

      padding: 32rpx;

      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-bottom: 34rpx;
    }

    .section-title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
      margin-bottom: 32rpx;
    }

    .assets-grid {
      display: flex;
      justify-content: space-between;
    }

    .asset-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }

    .asset-label {
      font-size: 24rpx;
      color: #999999;
      margin-bottom: 15rpx;
    }

    .asset-value {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
    }

    .tabs-section {
      padding: 0 32rpx;
    }

    .tabs {
      display: flex;
      border-bottom: 1rpx solid #f0f0f0;
    }

    .tab-item {
      flex: 1;
      text-align: center;
      padding: 32rpx 0;
      font-size: 28rpx;
      color: #666666;
      position: relative;

      &.active {
        color: #209FEA;
        font-weight: 500;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 4rpx;
          background: #209FEA;
          border-radius: 2rpx;
        }
      }
    }

    .records-section {
      padding: 0 32rpx;
    }

    .record-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }
    }

    .record-left {
      display: flex;
      flex-direction: column;
    }

    .record-type {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
      margin-bottom: 8rpx;
    }

    .record-time {
      font-size: 24rpx;
      color: #999999;
    }

    .record-right {
      display: flex;
      align-items: center;
    }

    .record-amount {
      font-size: 32rpx;
      font-weight: 600;
      color: #52c41a;

      &.withdraw-amount {
        color: #e74c3c;
      }
    }
  }
}
</style>
